<!DOCTYPE html>

<!-- script标签会把请求过来的响应数据当做JS脚本自动执行 -->
<!-- 已登录，返回：var isLogin = true -->
<!-- 未登录，返回：var isLogin = false -->
<script src="/login/status"></script>
<script>
  // console.log(isLogin, 'isLogin');
  if (!isLogin) {
    location.href = '/admin/login.html'
  }
</script>

<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>Categories &laquo; Admin</title>
  <link rel="stylesheet" href="/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="/assets/css/admin.css">
  <script src="/assets/vendors/nprogress/nprogress.js"></script>
</head>

<body>
  <script>NProgress.start()</script>

  <div class="main">
    <nav class="navbar">
      <button class="btn btn-default navbar-btn fa fa-bars"></button>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="profile.html"><i class="fa fa-user"></i>个人中心</a></li>
        <li><a href="login.html"><i class="fa fa-sign-out"></i>退出</a></li>
      </ul>
    </nav>
    <div class="container-fluid">
      <div class="page-title">
        <h1>分类目录</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="row">
        <!-- 装添加和编辑表单的容器盒子 -->
        <div class="col-md-4" id="formBox"></div>
        <div class="col-md-8">
          <div class="page-action">
            <input type="button" class="btn btn-danger btn-sm" id="batchDelBtn" value="批量删除" disabled>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40">
                  <input type="checkbox" id="checkAllBtn">
                </th>
                <th>名称</th>
                <th>图标</th>
                <th>创建时间</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <!-- 列表容器 -->
            <tbody id="listBox"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <div class="aside">
    <div class="profile">
      <img class="avatar" src="/uploads/avatar.jpg">
      <h3 class="name">Coder</h3>
    </div>
    <ul class="nav">
      <li>
        <a href="index.html"><i class="fa fa-dashboard"></i>仪表盘</a>
      </li>
      <li class="active">
        <a href="#menu-posts" data-toggle="collapse">
          <i class="fa fa-thumb-tack"></i>文章<i class="fa fa-angle-right"></i>
        </a>
        <ul id="menu-posts" class="collapse in">
          <li><a href="posts.html">所有文章</a></li>
          <li><a href="post-add.html">写文章</a></li>
          <li class="active"><a href="categories.html">分类目录</a></li>
        </ul>
      </li>
      <li>
        <a href="comments.html"><i class="fa fa-comments"></i>评论</a>
      </li>
      <li>
        <a href="users.html"><i class="fa fa-users"></i>用户</a>
      </li>
      <li>
        <a href="#menu-settings" class="collapsed" data-toggle="collapse">
          <i class="fa fa-cogs"></i>设置<i class="fa fa-angle-right"></i>
        </a>
        <ul id="menu-settings" class="collapse">
          <li><a href="slides.html">图片轮播</a></li>
          <li><a href="settings.html">网站设置</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <script src="/assets/vendors/jquery/jquery.js"></script>
  <script src="/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script src="/assets/vendors/art-template/template-web.js"></script>
  <script>NProgress.done()</script>

  <!-- 列表模板 -->
  <script type="text/html" id="listTpl">
    {{ each data v }}
    <tr>
      <td class="text-center">
        <input type="checkbox" data-id="{{ v._id }}">
      </td>
      <td>{{ v.title }}</td>
      <td><i class="fa {{ v.className }}"></i></td>
      <td>{{ v.createAt }}</td>
      <td class="text-center">
        <a href="javascript:;" class="btn btn-info btn-xs editBtn" data-id="{{ v._id }}">编辑</a>
        <a href="javascript:;" class="btn btn-danger btn-xs delBtn" data-id="{{ v._id }}">删除</a>
      </td>
    </tr>
    {{ /each }}
  </script>

  <!-- 添加表单模板 -->
  <script type="text/html" id="addFormTpl">
    <form id="addForm">
      <h2>添加分类</h2>
      <div class="form-group">
        <label>名称</label>
        <input class="form-control" type="text" placeholder="请输入分类名称" name="title">
      </div>
      <div class="form-group">
        <label>图标</label>
        <input class="form-control" type="text" placeholder="请输入分类图标类名" name="className">
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type="submit">提交</button>
      </div>
    </form>
  </script>

  <!-- 编辑表单模板 -->
  <script type="text/html" id="editFormTpl">
    <form id="editForm" data-id="{{ _id }}">
      <h2>编辑分类</h2>
      <div class="form-group">
        <label>名称</label>
        <input class="form-control" type="text" placeholder="请输入分类名称" name="title" value="{{ title }}">
      </div>
      <div class="form-group">
        <label>图标</label>
        <input class="form-control" type="text" placeholder="请输入分类图标类名" name="className" value="{{ className }}">
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type="submit">提交</button>
        <button class="btn btn-default resetBtn" type="button" data-id="{{ _id }}">重置</button>
        <button class="btn btn-danger cancelBtn" type="button">取消</button>
      </div>
    </form>
  </script>

  <script>

    $(() => {


      // 全选复选框
      const $checkAllBtn = $('#checkAllBtn')
      // 批量删除按钮
      const $batchDelBtn = $('#batchDelBtn')
      // 表单容器盒子
      const $formBox = $('#formBox')
      // 列表容器盒子
      const $listBox = $('#listBox')

      // 渲染添加表单函数
      const renderAddForm = () => {
        $formBox.html(template('addFormTpl'))
      }

      // 页面第一次加载时，需要调用函数，渲染添加表单
      renderAddForm()

      // 由于第一次渲染添加表单时，是同步执行的，所以这里可以获取到添加表单元素
      // 但是你不能保证后续不会动态渲染，如果用户点击了编辑按钮，操作过一次，你这个添加表单又被重新渲染了
      // 所以这里还是需要用事件委派的形式绑定提交事件
      // const $addForm = $('#addForm')
      // console.log($addForm[0]);
      // $addForm.submit(() => {
      //   const data = $addForm.serialize()
      //   $.ajax({
      //     type: 'POST',
      //     url: '/categories',
      //     data,
      //     success(res) {
      //       // location.reload()
      //       cateAry.unshift(res)
      //       renderList()
      //     }
      //   })
      //   return false
      // })
      $formBox.on('submit', '#addForm', ({ target }) => {
        const data = $(target).serialize()
        $.ajax({
          type: 'POST',
          url: '/categories',
          data,
          success(res) {
            cateAry.push(res)
            renderList()
            renderAddForm()
          }
        })
        return false
      })

      // 存放列表数据的数组
      let cateAry = []

      // 渲染列表函数
      const renderList = () => {
        $listBox.html(template('listTpl', { data: cateAry }))
      }

      // 获取分类列表数据
      $.ajax({
        type: 'GET',
        url: '/categories',
        success(res) {
          cateAry = res
          renderList()
        }
      })

      // 渲染编辑表单函数
      const renderEditForm = (cate) => {
        $formBox.html(template('editFormTpl', cate))
      }

      // 由于列表数据是动态渲染的，所以编辑和删除按钮都需要通过事件委派的形式绑定
      $listBox.on('click', '.editBtn', ({ target }) => {
        const cate = cateAry.find(v => v._id === target.dataset.id)
        renderEditForm(cate)
      })

      // 给编辑表单中的重置按钮添加点击事件
      $formBox.on('click', '.resetBtn', ({ target }) => {
        const cate = cateAry.find(v => v._id === target.dataset.id)
        renderEditForm(cate)
      })

      // 给编辑表单中的取消按钮添加点击事件
      $formBox.on('click', '.cancelBtn', ({ target }) => {
        renderAddForm()
      })

      // 给编辑表单绑定提交事件
      $formBox.on('submit', '#editForm', ({ target }) => {
        const id = target.dataset.id
        const data = $(target).serialize()
        $.ajax({
          type: 'PUT',
          url: `/categories/${id}`,
          data,
          success(res) {
            // 把数组中旧的分类对象替换成新的分类对象
            const index = cateAry.findIndex(v => v._id === id)
            cateAry.splice(index, 1, res)
            renderList()
            renderAddForm()
          }
        })
        return false
      })

      // 给用户删除按钮添加点击事件（事件委派的形式）
      $listBox.on('click', '.delBtn', ({ target }) => {
        const id = target.dataset.id
        const cate = cateAry.find(v => v._id === id)

        if (confirm(`你确定要删除 "${cate.title}" 分类吗？`)) {
          $.ajax({
            type: 'DELETE',
            url: `/categories/${id}`,
            success() {
              // 过滤出id不是我们本次删除的分类
              cateAry = cateAry.filter(v => v._id !== id)
              renderList()
            }
          })
        }

      })

      // 批量删除点击事件
      $batchDelBtn.click(() => {
        // 获取到所有选中的复选框
        // const idsStr = Array.prototype.slice.call($listBox.find(':checkbox:checked'))
        //   .reduce((idsStr, v) => `${idsStr}-${v.dataset.id}`, '')
        //   .slice(1)

        // console.log(Array.prototype.slice.call($listBox.find(':checkbox:checked')));
        // console.log(Array.prototype.slice.call($listBox.find(':checkbox:checked')).map(v => v.dataset.id));


        const idAry = Array.prototype.slice.call($listBox.find(':checkbox:checked')) // 这个是将jq对象转换成Array数组
          .map(v => v.dataset.id) // 将input上面的data-id属性值，拿出来，组成一个数组

        // 如果点击了取消按钮，那么confirm函数反馈false，然后取反 !false ， 则为true, 进入if   直接return 
        if (!confirm(`你确定要删除这 ${idAry.length} 个分类吗？`)) return

        $.ajax({
          type: 'DELETE',
          url: `/categories/${idAry.join('-')}`, // 最后用 - 拼接这些id 成字符串
          success(res) {
            // 过滤出没有被删除的数据数组
            cateAry = cateAry.filter(v => !idAry.includes(v._id))
            renderList()
            // 把全选按钮的选中状态设为不选中
            $checkAllBtn.prop('checked', false)
          }
        })
      })

      // 全选复选框change事件
      $checkAllBtn.change(({ target }) => {
        // 找到列表中所有的复选框，将其checked属性设置为全选复选框当前的选中状态
        $listBox.find(':checkbox').prop('checked', target.checked)
        toggleBatchDelBtnStatus()
      })

      // 列表中多有复选框的change事件
      $listBox.on('change', ':checkbox', () => {
        // 获取当前选中的复选框个数
        const checkedLen = $listBox.find(':checkbox:checked').length
        // 如果当前所有的分类数量   与   当前选中的数量  一致    那么全选按钮就要被选中   反之 不选中
        $checkAllBtn.prop('checked', cateAry.length === checkedLen)
        toggleBatchDelBtnStatus()
      })

      // 批量删除按钮状态开关函数
      const toggleBatchDelBtnStatus = () => {
        // 获取当前选中的复选框个数
        const checkedLen = $listBox.find(':checkbox:checked').length
        // 如果列表中有数据被选中，那么批量删除按钮就应该启用，反之则禁用
        if (checkedLen > 0) {
          // 有
          $batchDelBtn.prop('disabled', false)
        } else {
          // 木有
          $batchDelBtn.prop('disabled', true)
        }
        // 这句代码和上面的 if...else... 是等价的
        // $batchDelBtn.prop('disabled', checkedLen === 0)
      }

    })


  </script>
</body>

</html>